import 'package:flutter/material.dart';
import 'package:x3_base_package/x3_base_package.dart';
import 'package:x3_business_core/common_models/depot_model.dart';

/// 删除 店铺 item
class DelDepotItemWidget extends StatelessWidget {
  final DepotModel model;
  final VoidCallback onDelete;

  const DelDepotItemWidget({Key key, @required this.model, this.onDelete}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DepotItemWidget(
      model: this.model,
      suffix: BaseCloseButton(onPress: this.onDelete),
    );
  }
}

/// 有状态 店铺 item
class CheckBoxDepotItemWidget extends StatefulWidget {
  final DepotModel model;
  final bool isSelected;
  final Function(bool) onChange;
  final Widget expandWidget;

  const CheckBoxDepotItemWidget({Key key, @required this.model, @required this.onChange, this.isSelected = false, this.expandWidget})
      : assert(onChange != null),
        super(key: key);

  @override
  _CheckBoxDepotItemWidgetState createState() => _CheckBoxDepotItemWidgetState();
}

class _CheckBoxDepotItemWidgetState extends State<CheckBoxDepotItemWidget> with AutomaticKeepAliveClientMixin {
  bool _selected;

  @override
  void initState() {
    _selected = widget.isSelected;
    super.initState();
  }

  @override
  void didUpdateWidget(covariant CheckBoxDepotItemWidget oldWidget) {
    if (_selected != widget.isSelected) {
      _selected = widget.isSelected;
    }
    if (oldWidget.isSelected != widget.isSelected) {
      _selected = widget.isSelected;
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return BaseCardComponent(
      padding: const EdgeInsets.only(top: 12.0, bottom: 12.0, left: 16.0, right: 4.0),
      onTap: () {
        _selected = !_selected;
        widget.onChange(_selected);
        setState(() {});
      },
      child: DepotItemWidget(
        model: widget.model,
        expandWidget: widget.expandWidget,
        suffix: Container(
          alignment: Alignment.center,
          child: BaseCustomCheckboxButton(checked: _selected, disable: true),
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

/// 通用 店铺 item
class DepotItemWidget extends StatelessWidget {
  final DepotModel model;
  final Widget expandWidget;
  final Widget suffix;

  const DepotItemWidget({Key key, @required this.model, this.suffix, this.expandWidget}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double headSize = 48;
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: headSize,
            child: SizedBox.expand(
              child: Align(
                alignment: Alignment.topCenter,
                child: BaseImageComponent(
                  imageUrl: this.model.depotImage,
                  width: headSize,
                  height: headSize,
                  circular: 4,
                  type: BaseImageTypeEnum.X3Depot,
                ),
              ),
            ),
          ),
          SizedBox(width: 12),
          Expanded(child: _buildContent(context)),
          SizedBox(width: 8),
          this.suffix ?? SizedBox(),
        ],
      ),
    );
  }

  Widget _buildContent(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        DefaultTextStyle(
          style: Theme.of(context).textTheme.bodyText2.copyWith(fontSize: 14),
          // child: BaseComponentUtils.buildTextSpanWidget([this.model.depotName ?? '', this.model.depotId == null ? '' : '(${this.model.depotId})'], maxLines: 1),
          child: BaseComponentUtils.buildTextSpanFlexible(title: this.model.depotName ?? '', subTitle: this.model.depotId == null ? '' : '(${this.model.depotId})'),
        ),
        _buildCity(context),
        this.expandWidget ?? SizedBox(),
      ],
    );
  }

  Widget _buildCity(BuildContext context) {
    if (this.model.depotCity == null) return SizedBox(height: 0);
    return Container(margin: EdgeInsets.symmetric(vertical: 4), child: BaseComponentUtils.buildTextSpanWidget(['所属城市:', '${this.model.depotCity}'], styles: {0: Theme.of(context).textTheme.subtitle2, 1: Theme.of(context).textTheme.subtitle2}));
  }
}
